<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#7fffd4">
<div id="app">
    <ul>
        <li v-for="user in users" v-if="user.gender=='女'">
            {{user.name}} ✔ {{user.gender}} ✔ {{user.age}} 🎄
        </li>
    </ul>
    <hr>

    <ul>
        <li v-for="(user,index) in users">
            {{index + 1}} ✔ {{user.name}} ✔ {{user.gender}} ✔ {{user.age}} 🎄
        </li>
    </ul>
    <hr>

    <ul>
        <li v-for="value in student">
            {{value}} 🎄
        </li>
    </ul>
    <hr>

    <ul >
        <li v-for="(value,key) in student">
            {{key}} ✔ {{value}} 🎄
        </li>
    </ul>
</div>
<!--引入vue-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            users: [
                {name: '柳岩', gender: '女', age: 21},  //{}代表对象
                {name: '峰哥', gender: '男', age: 18},
                {name: '冰冰', gender: '女', age: 24},
                {name: '亦菲', gender: '女', age: 18},
                {name: '娜扎', gender: '女', age: 25}
            ],
            student: {username: 'steel', password: '123456'}
        }


    })

</script>
</body>
</html>